<template>
  <div>
    <el-table :data="userList" style="width: 100%" stripe border>
      <el-table-column prop="username" label="名字" align="center">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" align="center">
      </el-table-column>
      <el-table-column prop="mobile" label="电话" align="center">
      </el-table-column>
      <el-table-column prop="role_name" label="管理员" align="center">
      </el-table-column>
      <el-table-column prop="mg_state" label="状态" align="center">
        <template v-slot:default="scope">
          <el-switch
            v-model="scope.row.mg_state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeState(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <!-- 管理用户 -->
      <el-table-column prop="" label="操作" align="center">
        <template v-slot:default="scope">
          <el-tooltip effect="dark" content="编辑用户" placement="top-start">
            <el-button icon="el-icon-edit" @click="editUser(scope.row.id)"></el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="删除用户" placement="top-start">
            <el-button icon="el-icon-delete"></el-button>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="分配用户权限"
            placement="top-start"
          >
            <el-button icon="el-icon-setting"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页管理 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="userPage.page"
      :page-sizes="[1, 3, 5, 10]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="userPage.total"
    >
    </el-pagination>
    <!-- 修改用户信息弹窗 -->
    <alter-user />
  </div>
</template>

<script>
/* 网络请求 */
import { getState } from "@/api/user";
import alterUser from "./alterUser.vue";
export default {
  components: { alterUser },
  data() {
    return {
      reqData: {
        query: "",
        pagenum: 1,
        pagesize: 1,
      },
      userPage: {
        pagenum: "",
        total: 4,
      },
    };
  },
  mounted() {
    this.$store.dispatch("getUser", this.reqData);
  },
  computed: {
    userList() {
      return this.$store.state.userList;
    },
  },
  methods: {
    /* 编辑用户弹窗 */
    editUser(id) {
      console.log(id);
      this.$store.state.editDialog = !this.$store.state.editDialog;
    },
    handleSizeChange(val) {
      this.reqData.pagesize = val;
      this.$store.dispatch("getUser", this.reqData);
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.reqData.pagenum = val;
      this.$store.dispatch("getUser", this.reqData);
      console.log(`当前页: ${val}`);
    },
    /* 网络请求 */
    /* 请求更改状态 */
    async changeState(data) {
      const { data: res } = await getState(data.id, data.mg_state);
      if (res.meta.status != 200) {
        data.mg_state = !data.mg_state;
        return this.$message.error("修改状态失败！");
      }
      this.$message({
        type: "success",
        message: "修改用户状态成功",
        duration: 2000,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>